<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式/尺寸操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css()                   功能：
		                         1个参：传入css属性名
								 功能：获取匹配元素集合中第一个元素的css属性值
								 2个参：传入css属性名和属性值
								 功能：设置匹配元素集合中的所有元素的css属性值
								 n个参：传入多个css属性名和属性值
								 语法糖、css({"属性名"："属性值",
								            "属性名":"属性值",
											................
											"属性名":"属性值"
											})
											
		 width()和height()  功能：匹配元素集合中第一个元素的宽高度
		                    无参：获取匹配元素集合中第一个元素的宽高度
							有参：设置匹配元素集合中第一个元素的宽高度
							width(数值)
							
		 outerWidth和outerHeight()  
		 出现原因： 元素存在于盒子当中，盒子模型，宽度计算方式：内外边距+边框+内容
		 功能：
		       无参：获取元素宽高度，计算盒子模型：内边距+边框
		       有参：传入bool值，true时候，计算盒子模型：内外边距+边框
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			.box_five{
				background-color: #55ffff;
				margin: 20px;
				padding: 20px;
				border: 5px solid #55beff;
			} 
			.result{
				margin-top: 10px;
				font-weight: 700;
			}
		 </style>
	</head>
	<body>
		<!-- css:  .box_five添加样式  背景颜色  内外边距：20px  边框:5px 
		           .result添加样式：上外边距：10px  字体加粗
			引入JQ框架
		-->
		<!-- 创建两个div平行  6个按钮 -->
		<!-- 1.显示效果区域 -->
		<div class="box_five" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度(包含内边距+边框)</button>
		<button id="bpmBtn">获取高度(内外边距+边框)</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击 获取颜色属性值  按钮  获取颜色值并打印页面上  */
			$("#getColorbtn").click(function(){
				//获取css中属性值的方式--传入一个属性名
				var bgColor=$(".box_five").css("background-color");
				//页面打印属性值  ？？？
				$("#result").text("获取的属性值是："+bgColor);
			});
			/* 2.点击 设置颜色效果  按钮  设置颜色值并打印页面上  */
			$("#setColorbtn").click(function(){
				//改成橘色
				$(".box_five").css("background-color","hotpink");
				$("#result").text("改变后的颜色为：亮粉色");
			});
			/* 3.点击 设置多属性效果  按钮  圆、背景色修改（自定）、阴影  */
			$("#setBtn").click(function(){
				$(".box_five").css({"background-image":"url(../img/1111.gif)",
					                "background-color":"#ff4635",
				                    "border":"5px solid #ff0",
									"width":"300px",
									"height":"300px",
									"background-size":"100% 100%",
									"border-radius":"50%",
									"box-shadow":"5px 5px 10px #ff6700"
				});
			});
			/* 4. 点击 获取元素宽度/设置元素宽度 按钮  */
			$("#gsBtn").click(function(){
				var w=$(".box_five").width();  //吸顶灯宽高度使用
				$("#result").text("获取的宽度："+w+"px");
			});
			/* 5.点击  获取高度（内边距+边框）  按钮  计算box空间高度  */
			$("#bpBtn").click(function(){
				var bp=$(".box_five").outerHeight();
				$("#result").text("获取高度为："+bp+"px");
			});
			/* 6.点击  获取高度（内外边距+边框） 按钮  计算box空间高度  */
			$("#bpmBtn").click(function(){
				var bpm=$(".box_five").outerHeight(true);
				$("#result").text("获取高度为："+bpm+"px");
			});
			
		</script>
	</body>
</html>